<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="Use the camera to control the view, and create custom event handlers for input."
    />
    <meta name="cesium-sandcastle-labels" content="Tutorials, Showcases" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar">
      <table class="infoPanel">
        <tbody>
          <tr>
            <td>Click on the Cesium display to start.</td>
          </tr>
          <tr>
            <td>w/s - move forward/backward</td>
          </tr>
          <tr>
            <td>a/d - move left/right</td>
          </tr>
          <tr>
            <td>q/e - move up/down</td>
          </tr>
          <tr>
            <td>
              left mouse button down plus mouse move changes the look direction
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin
        var viewer = new Cesium.Viewer("cesiumContainer");

        var scene = viewer.scene;
        var canvas = viewer.canvas;
        canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
        canvas.onclick = function () {
          canvas.focus();
        };
        var ellipsoid = scene.globe.ellipsoid;

        // disable the default event handlers
        scene.screenSpaceCameraController.enableRotate = false;
        scene.screenSpaceCameraController.enableTranslate = false;
        scene.screenSpaceCameraController.enableZoom = false;
        scene.screenSpaceCameraController.enableTilt = false;
        scene.screenSpaceCameraController.enableLook = false;

        var startMousePosition;
        var mousePosition;
        var flags = {
          looking: false,
          moveForward: false,
          moveBackward: false,
          moveUp: false,
          moveDown: false,
          moveLeft: false,
          moveRight: false,
        };

        var handler = new Cesium.ScreenSpaceEventHandler(canvas);

        handler.setInputAction(function (movement) {
          flags.looking = true;
          mousePosition = startMousePosition = Cesium.Cartesian3.clone(
            movement.position
          );
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

        handler.setInputAction(function (movement) {
          mousePosition = movement.endPosition;
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        handler.setInputAction(function (position) {
          flags.looking = false;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);

        function getFlagForKeyCode(keyCode) {
          switch (keyCode) {
            case "W".charCodeAt(0):
              return "moveForward";
            case "S".charCodeAt(0):
              return "moveBackward";
            case "Q".charCodeAt(0):
              return "moveUp";
            case "E".charCodeAt(0):
              return "moveDown";
            case "D".charCodeAt(0):
              return "moveRight";
            case "A".charCodeAt(0):
              return "moveLeft";
            default:
              return undefined;
          }
        }

        document.addEventListener(
          "keydown",
          function (e) {
            var flagName = getFlagForKeyCode(e.keyCode);
            if (typeof flagName !== "undefined") {
              flags[flagName] = true;
            }
          },
          false
        );

        document.addEventListener(
          "keyup",
          function (e) {
            var flagName = getFlagForKeyCode(e.keyCode);
            if (typeof flagName !== "undefined") {
              flags[flagName] = false;
            }
          },
          false
        );

        viewer.clock.onTick.addEventListener(function (clock) {
          var camera = viewer.camera;

          if (flags.looking) {
            var width = canvas.clientWidth;
            var height = canvas.clientHeight;

            // Coordinate (0.0, 0.0) will be where the mouse was clicked.
            var x = (mousePosition.x - startMousePosition.x) / width;
            var y = -(mousePosition.y - startMousePosition.y) / height;

            var lookFactor = 0.05;
            camera.lookRight(x * lookFactor);
            camera.lookUp(y * lookFactor);
          }

          // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
          var cameraHeight = ellipsoid.cartesianToCartographic(camera.position)
            .height;
          var moveRate = cameraHeight / 100.0;

          if (flags.moveForward) {
            camera.moveForward(moveRate);
          }
          if (flags.moveBackward) {
            camera.moveBackward(moveRate);
          }
          if (flags.moveUp) {
            camera.moveUp(moveRate);
          }
          if (flags.moveDown) {
            camera.moveDown(moveRate);
          }
          if (flags.moveLeft) {
            camera.moveLeft(moveRate);
          }
          if (flags.moveRight) {
            camera.moveRight(moveRate);
          }
        });
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>
